<template>
    <view>
        <view v-show="search.show == false">
            <custom :is_back="false">
                <template #backText>
                    全国邮寄商品
                </template>
                <template #right>
                    <view class="padding-lr-20 text-bold text-xl" @tap="search.show = true">
                        <text class="cuIcon-search"></text>
                    </view>
                </template>
            </custom>
            <sellerItemList key="sellerItemList" ref="sellerItemList" :data_append.sync="data"></sellerItemList>
        </view>
        <view v-show="search.show == true">
            <view class="cu-bar search bg-white padding-lr-30 flex align-center" style="height: 120rpx;">
                <view class="text-bold text-xxl" @tap="searchBack">
                    <text class="cuIcon-back_android"></text>
                </view>
                <view class="search-form round border-1-nddyny" style="height: 72rpx; margin-left: 20rpx; margin-right: 20rpx;">
                    <text class="cuIcon-search"></text>
                    <input @input="(e)=>{search.inputValue = e.target.value}" :value="search.inputValue" style="font-size: 28rpx;"
                        placeholder="搜一搜商品名、商品介绍" confirm-type="search"></input>
                </view>
                <view class="text-lg" @tap="searchSubmit">
                    <text>搜索</text>
                </view>
            </view>
            <sellerItemList key="searchSellerItemList" ref="searchSellerItemList" :is_search="true" :data_append.sync="data"></sellerItemList>
        </view>
    </view>
</template>

<script>
    import sellerItemList from './components/sellerItemList.vue';
    export default {
        components: {
            sellerItemList,
        },
        data() {
            let search = {
                show: false,
                inputValue: '',
                value: ''
            }
            return {
                search: this.$nddyny.object.copy(search),
                search_bak: this.$nddyny.object.copy(search),
                data: {
                    form: {
                        is_seller: this.$store.state.user.is_seller_firm == 1 ? '' : '1',
                        is_firm: this.$store.state.user.is_seller_firm == 1 ? '1' : '',
                        sort_key: 'all_sort',
                    }
                }
            }
        },
        watch: {
            'search.value'(new_value) {
                if (!new_value) {
                    return;
                }
                this.$refs.searchSellerItemList.getList(this.$api.list_action_force_init, new_value);
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.$refs.sellerItemList.getList(this.$api.list_action_page_init);
            })
        },
        methods: {
            searchBack() {
                this.$set(this, 'search', this.$nddyny.object.copy(this.search_bak));
                this.$refs.searchSellerItemList.initData();
            },
            searchSubmit() {
                this.search.value = this.search.inputValue;
            },
            listAdd() {
                let key = 'sellerItemList';
                if (this.search.show == true) {
                    key = 'searchSellerItemList';
                }
                if (this.$refs[key]) {
                    this.$nextTick(() => {
                        this.$refs[key].getList(this.$api.list_action_add);
                    })
                }
            },
        }
    }
</script>
